<template>
  <div class="zcgl-xmgl-edit-wrap">
    <el-form
      :ref="editFormRef"
      class="edit-form live-manage-info-audience"
      :model="formData"
      :rules="rules"
      label-width="125px"
    >
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <el-form-item label="所属公司" prop="company">
        <el-select v-model="formData.company" placeholder="请选择所属公司" disabled>
          <el-option
            v-for="(item, index) in companyList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目类型" prop="projectId">
        <el-select placeholder="请选择项目类型" v-model="formData.projectId">
          <el-option
            v-for="(item, index) in projectList"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所在位置" prop="description">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-select v-model="formData.provId" @change="cheackProv" >
                <el-option
                  v-for="(option,index) in provinces"
                  :key="index"
                  :label="option.name"
                  :value="option.id"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-select v-model="formData.cityId" @change="cheackCity" >
                <el-option
                  v-for="(option,index) in city"
                  :key="index"
                  :label="option.name"
                  :value="option.id"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <el-select v-model="formData.areaId" >
                <el-option
                  v-for="(option,index) in area"
                  :key="index"
                  :label="option.name"
                  :value="option.id"
                ></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="具体地址" prop="address">
        <el-input v-model="formData.address" placeholder="请输入具体地址" style="width:85%;float: left;"></el-input>
        <div class="cheackMap">
           <!-- <el-button type="danger" @click="$getRef('mapDialogRef').show()">新增</el-button> -->
          <el-link type="primary" @click="$getRef('mapDialogRef').show()">从地图中获取</el-link>
        </div>
      </el-form-item>
      <el-form-item label="客服电话" prop="tel">
        <el-input v-model="formData.tel" placeholder="请输入客服电话"></el-input>
      </el-form-item>
      <el-form-item label="特色标签" prop="features">
        <el-select v-model="formData.features" multiple placeholder="请选择">
          <el-option
            v-for="item in featuresList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="周边配套" prop="surrounding">
        <el-select v-model="formData.surrounding" multiple placeholder="请选择">
          <el-option v-for="item in surrounding" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传平面图" prop="attachments">
        <upload-image url="http://xxxxxxx" multiple v-model="formData.attachments" :max="3">
          <span slot="tip">每张图片最大2M，最多允许上传3张图片</span>
        </upload-image>
      </el-form-item>
      <el-form-item label="是否对外发布" prop="release">
        <el-switch v-model="formData.release"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitHandler">保存</el-button>
      </el-form-item>
    </el-form>
    <newMap ref="mapDialogRef" @mapClick="getMapVal"></newMap>
  </div>
</template>

<script>
export default JBoot({
  components: {
    newMap: require("./map").default
  },

  data() {
    return {
      moduleName: "xmgl",
      getMethod: "cheackDictInfo",
      submitMethod: "saveDictInfo",
      rules: {
        name: [{ required: true, message: "请输入项目名称" }],
        company: [{ required: true, message: "请选择所属公司" }],
        projectId: [{ required: true, message: "请选择项目类型" }],
        address: [{ required: true, message: "请输入具体地址" }],
        tel: [{ required: true, message: "请输入客服电话" }],
        // attachments: [{ required: true, message: "请上传平面图" }],
        release: [{ required: true, message: "请选择是否对外展示" }]
      },
      companyList: [{ id: 1, name: "银丰地产" }],
      projectList: [],
      featuresList: [],
      surrounding: [],
      provinces: [],
      city: [],
      area: []
    };
  },

  computed: {},

  methods: {
    afterInit() {
      this.$api("project", "queryManageProjectList").then(response => {
        this.$set(this, "projectList", response.data);
        this.$set(this.formData, "company", "银丰地产");
      });
      this.$api("xmgl", "queryfeaturesList").then(response => {
        this.$set(this, "featuresList", response.data);
      });
      this.$api("xmgl", "querysurrounding").then(response => {
        this.$set(this, "surrounding", response.data);
      });
      this.$api(this.moduleName, "queryProvinces", {}).then(response => {
        this.provinces = response.data;
      });
    },
    cheackProv(e) {
      if (e) {
        this.queryCity();
      }
    },
    cheackCity(e) {
      if (e) {
        this.queryArea();
      }
    },
    queryCity(val) {
      this.$api(this.moduleName, "queryCity", {
        id: val
      }).then(response => {
        this.city = response.data;
      });
    },
    queryArea(val) {
      this.$api(this.moduleName, "queryArea", {
        id: val
      }).then(response => {
        this.area = response.data;
      });
    },
    //获取详细地址
    getMapVal(data){
      console.log(data)
      this.$set(this.formData,"address",data)
    }
  },

  watch: {}
})
  .form()
  .build();
</script>

<style lang="scss">
.zcgl-xmgl-edit-wrap {
  .el-form-item--mini.el-form-item {
    margin-bottom: 30px;
    .selectDict {
      width: 30%;
      margin-right: 2%;
    }
    .cheackMap {
      width: 10%;
      text-align: center;
      float: left;
    }
  }
  .el-select {
    width: 100%;
  }
  .el-input {
    width: 94.5%;
  }
  .el-input--mini .el-input__inner {
    height: 35px;
    line-height: 35px;
  }
  .el-form-item__label {
    line-height: 29px;
  }
}
</style>
